<template>
  <!-- 面包屑导航区域 -->
  <breadcrumb :childMenu="['商品管理', '商品分类']"></breadcrumb>
  <!-- 卡品视图区域 -->
  <el-card>
    <el-row>
      <el-col>
        <el-button type="primary" @click="showAddDialog">添加分类</el-button>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <el-row>
      <!-- 树形表格  default-expand-all默认展开 -->
      <el-table
        :data="cateList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
      >
        >
        <el-table-column
          prop="cateName"
          label="分类名称"
          sortable
          width="180"
        />
        <el-table-column prop="isActive" label="是否有效" sortable width="180">
          <template v-slot="prop">
            <!-- 使用饿了么图标 -->
            <!-- <i class="el-icon-success" v-if="prop.row.isActive === false" style="color:green"></i>
            <i class="el-icon-error"  v-if="prop.row.isActive === true" style="color:red"></i> -->
            <!-- 使用@element-plus/icons的图标 -->
            <div style="font-size: 20px;">
              <select-el
                v-if="prop.row.isActive"
                style="width: 1em; height: 1em; margin-right: 8px;color:green"
              />
              <close-bold
                v-if="!prop.row.isActive"
                style="width: 1em; height: 1em; margin-right: 8px;color:red"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="层级" width="180">
          <template v-slot="prop">
            <el-tag v-if="prop.row.level === 0" size="mini">一级</el-tag>
            <el-tag v-if="prop.row.level === 1" type="success" size="mini"
              >二级</el-tag
            >
            <el-tag v-if="prop.row.level === 2" type="warning" size="mini"
              >三级</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="360">
          <template v-slot="prop">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditCategory(prop.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteCategory(prop.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        :pageInfo="pageInfo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></el-pagination>
    </el-row>
  </el-card>
  <!-- 添加分类的对话框 -->
  <add-cate-form
    :addDialogVisible="addDialogVisible"
    :cateKeyNames="cateKeyNames"
    :addCateFormRules="CateFormRules"
    @addDialogClose="addDialogClose"
  ></add-cate-form>
  <!-- 修改分类的对话框 -->
  <edit-cate-form
    :editDialogVisible="editDialogVisible"
    :editCateFormRules="CateFormRules"
    :cateKeyNames="cateKeyNames"
    :editCateForm="editCateForm"
    :selectedKeys="selectedKeys"
    @editDialogClose="editDialogClose"
  ></edit-cate-form>
</template>

<script>
import Breadcrumb from "@/common/Breadcrumb.vue";
import ElPagination from "@/common/ElPagination.vue";
import AddCateForm from "./childComponents/AddCateForm.vue";
import EditCateForm from "./childComponents/EditCateForm.vue";
import {
  getCategoryList,
  getCategoryKeyName,
  getParentIds,
  deleteCategory
} from "network/category.js";
export default {
  components: { Breadcrumb, ElPagination, AddCateForm, EditCateForm },
  data() {
    return {
      //商品分类的数据列表,默认为空
      cateList: [],
      //分页信息
      pageInfo: [],
      queryInfo: {
        // type:值:1,2,3分别表示显示一层二层三层分类列表，如果不传递，则默认获取所有级别的分类
        type: "3",
        pageIndex: 1,
        pageSize: 5
      },
      addDialogVisible: false,
      editDialogVisible: false,
      //选择父级分类下拉框绑定的数据源
      cateKeyNames: [],
      //需要修改的分类的表单
      editCateForm: [],
      // 级联选择器选定的数据
      selectedKeys: [],
      // 表单的验证规则对象
      CateFormRules: {
        cateName: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "分类名称的长度在2~10个字符之间",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    async getCategoryList() {
      const res = await getCategoryList(this.queryInfo);
      if (res.status !== 200)
        return this.$message.error({
          showClose: true,
          message: "获取商品分类失败"
        });
      this.cateList = res.response;
      this.pageInfo.totalCount = res.totalCount;
      this.pageInfo.pageIndex = res.pageIndex;
      this.pageInfo.pageSize = res.pageSize;
    },
    //监听pageSize的变化
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getCategoryList();
    },
    //监听pageIndex变化
    handleCurrentChange(newPage) {
      this.queryInfo.pageIndex = newPage;
      this.getCategoryList();
    },
    //显示添加分类的对话框
    showAddDialog() {
      this.getCategoryKeyName();
      this.addDialogVisible = true;
    },
    //关闭添加分类的对话框
    addDialogClose(isReload) {
      this.addDialogVisible = false;
      if (isReload) {
        this.getCategoryList();
      }
    },
    //关闭修改分类的对话框
    editDialogClose(isReload) {
      this.editCateForm = [];
      this.selectedKeys = [];
      this.editDialogVisible = false;
      if (isReload) {
        this.getCategoryList();
      }
    },
    //查询商品分类id和名称
    async getCategoryKeyName() {
      const res = await getCategoryKeyName("2");
      if (res.status !== 200)
        return this.$message.error({ showClose: true, message: res.msg });

      this.cateKeyNames = res.response;
    },
    //显示修改分类的对话框
    async showEditCategory(data) {
      this.getCategoryKeyName();
      this.editCateForm = data;
      const res = await getParentIds(data.id);
      if (res.status === 200) this.selectedKeys = res.response;
      this.editDialogVisible = true;
    },
    //删除分类
    async deleteCategory(id) {
      this.$confirm("确定要删除当前分类及子分类吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          //如果角色确定删除,则返回值为字符串'confirm'
          const res = await deleteCategory(id);
          if (res.status === 200) {
            this.$message.success({
              showClose: true,
              message: res.msg
            });
            return this.getCategoryList();
          } else
            return this.$message.error({
              showClose: true,
              message: res.msg
            });
        })
        .catch(() => {
          //如果角色取消了删除,则返回值为字符串'cancel'
          this.$message.info({
            showClose: true,
            message: "已取消删除!"
          });
        });
    }
  }
};
</script>

<style lang="less" scoped></style>
